// eslint
import type { FUniver } from '@univerjs/facade'
import { ScrollToCellCommand } from '@univerjs/sheets-ui'

/**
 * 在工具栏中设置按钮，用于在单元格 A1 中设置值
 * 
 * @param $toolbar - 工具栏的 HTML 元素
 * @param univerAPI - Univer API 实例，用于与 Univer 交互
 */
export function setupSetValue($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个按钮元素
  const $button = document.createElement('a')
  // 设置按钮的文本内容
  $button.textContent = 'set A1 Value'
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 要设置的值
    const value = 'Hello, World!'

    // 获取当前活动的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 如果无法获取活动工作簿，则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')
    // 获取当前活动的工作表
    const activeSheet = activeWorkbook.getActiveSheet()
    // 如果无法获取活动工作表，则抛出错误
    if (!activeSheet)
      throw new Error('activeSheet is not defined')

    // 获取单元格 A1 的范围对象
    const range = activeSheet.getRange(0, 0)
    // 如果无法获取范围对象，则抛出错误
    if (!range)
      throw new Error('range is not defined')

    // 将值设置到单元格 A1 中
    // @see https://univer.ai/typedoc/@univerjs/facade/classes/FRange#setValue
    range.setValue(value)
  })
}

/**
 * 设置指定单元格范围的值
 * 
 * 该函数创建一个按钮，并绑定到工具栏上当点击按钮时，将在活动工作表的指定范围内设置值
 * 
 * @param $toolbar 工具栏的HTML元素，用于附加按钮
 * @param univerAPI Univer API实例，用于与Univer交互
 */
export function setupSetValues($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个按钮元素
  const $button = document.createElement('a')
  // 设置按钮的文本内容
  $button.textContent = 'set A1:B2 values'
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 定义要设置的值
    const values = [
      ['Hello', 'World!'],
      ['Hello', 'Univer!'],
    ]

    // 获取当前活动的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 如果无法获取活动工作簿，则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')
    // 获取当前活动的工作表
    const activeSheet = activeWorkbook.getActiveSheet()
    // 如果无法获取活动工作表，则抛出错误
    if (!activeSheet)
      throw new Error('activeSheet is not defined')

    // 根据要设置的值的范围，获取目标单元格范围
    const range = activeSheet.getRange(0, 0, values.length, values[0].length)
    // 如果无法获取目标单元格范围，则抛出错误
    if (!range)
      throw new Error('range is not defined')

    // 设置单元格范围的值
    /**
     * @see https://univer.ai/typedoc/@univerjs/facade/classes/FRange#setValues
     */
    range.setValues(values)
  })
}

/**
 * 在工具栏上设置获取单元格值的按钮
 * 
 * @param $toolbar 工具栏的HTML元素
 * @param univerAPI Univer API实例，用于操作工作簿和工作表
 */
export function setupGetValue($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个按钮元素
  const $button = document.createElement('a')
  // 设置按钮的文本内容
  $button.textContent = 'get A1 value'
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 定义要操作的单元格值
    const values = [
      ['Hello', 'World!'],
      ['Hello', 'Univer!'],
      ['Hello', 'Sheets!'],
    ]

    // 获取当前活动的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 如果无法获取活动工作簿，则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')
    // 获取当前活动的工作表
    const activeSheet = activeWorkbook.getActiveSheet()
    // 如果无法获取活动工作表，则抛出错误
    if (!activeSheet)
      throw new Error('activeSheet is not defined')

    // 根据定义的单元格值，获取相应范围的单元格
    const range = activeSheet.getRange(0, 0, values.length, values[0].length)
    // 如果无法获取单元格范围，则抛出错误
    if (!range)
      throw new Error('range is not defined')

    // 弹窗显示获取到的单元格值
    // eslint-disable-next-line no-alert
    alert(JSON.stringify(range.getValue(), null, 2))
    // 控制台输出获取到的单元格值
    // eslint-disable-next-line no-console
    console.log(JSON.stringify(range.getValue(), null, 2))
  })
}

/**
 * 设置获取A1单元格数据的按钮事件
 * 
 * 此函数在给定的工具栏上添加一个按钮，用于获取当前工作表的A1单元格的数据
 * 当按钮被点击时，它会触发一个事件，该事件使用Univer API从活动工作表的A1单元格中获取数据，并将其显示在警告框和控制台中
 * 
 * @param $toolbar 要添加按钮的工具栏元素
 * @param univerAPI Univer API实例，用于与Univer交互
 */
export function setupGetA1CellData($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个链接元素作为按钮，并设置其文本内容
  const $button = document.createElement('a')
  $button.textContent = 'get A1 CellData'
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 获取当前活动的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')
    // 获取当前活动的工作表
    const activeSheet = activeWorkbook.getActiveSheet()
    if (!activeSheet)
      throw new Error('activeSheet is not defined')

    // 获取A1单元格的范围
    const range = activeSheet.getRange(0, 0, 1, 1)
    if (!range)
      throw new Error('range is not defined')

    // 获取A1单元格的数据并将其显示在警告框和控制台中
    // 请参阅https://univer.ai/typedoc/@univerjs/facade/classes/FRange#getValue以了解更多信息
    // eslint-disable-next-line no-alert
    alert(JSON.stringify(range.getCellData(), null, 2))
    // eslint-disable-next-line no-console
    console.log(JSON.stringify(range.getCellData(), null, 2))
  })
}

/**
 * 设置工具栏按钮以获取A1:B2单元格的值
 * 
 * 此函数创建一个按钮，当点击该按钮时，将获取并展示A1:B2单元格的值
 * 它依赖于Univer API来访问和操作工作簿和工作表
 * 
 * @param $toolbar HTMLElement类型，表示工具栏的容器，用于appendChild操作
 * @param univerAPI FUniver类型，用于与Univer交互的API实例
 */
export function setupValues($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个链接元素作为按钮
  const $button = document.createElement('a')
  // 设置按钮的文本内容
  $button.textContent = 'get A1:B2 values'
  // 将按钮添加到工具栏容器中
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 定义一个二维数组，用于模拟A1:B2单元格的值
    const values = [
      ['Hello', 'World!'],
      ['Hello', 'Univer!'],
      ['Hello', 'Sheets!'],
    ]

    // 获取当前活动的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 如果无法获取活动工作簿，则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')
    // 获取活动工作簿中的活动工作表
    const activeSheet = activeWorkbook.getActiveSheet()
    // 如果无法获取活动工作表，则抛出错误
    if (!activeSheet)
      throw new Error('activeSheet is not defined')

    // 根据values数组的大小，获取相应范围的单元格
    const range = activeSheet.getRange(0, 0, values.length, values[0].length)
    // 如果无法获取单元格范围，则抛出错误
    if (!range)
      throw new Error('range is not defined')

    // TODO: add facade API
    // 初始化一个二维数组，用于存储从单元格获取的值
    const data: (string | undefined)[][] = []
    // 遍历单元格范围，获取每个单元格的值，并填充到data数组中
    range.forEach((row, col, cell) => {
      data[row] = data[row] || []
      data[row][col] = cell.v?.toString()
    })

    // 弹窗显示获取到的单元格值的JSON字符串
    alert(JSON.stringify(data, null, 2))
    // 控制台输出获取到的单元格值的JSON字符串
    console.log(JSON.stringify(data, null, 2))
  })
}

/**
 * 设置获取工作簿数据的按钮
 * 
 * 此函数创建并初始化一个按钮，该按钮允许用户获取当前活动工作簿的数据
 * 当按钮被点击时，它会触发一个事件，该事件会获取活动工作簿的快照数据，并将其显示在警告框和控制台中
 * 
 * @param $toolbar 要将按钮添加到的HTML元素
 * @param univerAPI Univer API实例，用于与Univer交互
 */
export function setupGetWorkbookData($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个链接元素作为按钮
  const $button = document.createElement('a')
  // 设置按钮文本
  $button.textContent = 'get workbook data'
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 获取当前活动的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 如果未定义活动工作簿，则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')

    // 获取活动工作簿的快照数据，并以格式化的形式显示在警告框和控制台中
    const workbookData = JSON.stringify(activeWorkbook.getSnapshot(), null, 2)
    alert(workbookData)
    console.log(workbookData)
  })
}

/**
 * 设置获取工作表数据的功能
 * 
 * 此函数将创建一个按钮，当点击该按钮时，将获取当前工作簿中名为“Sheet1”的工作表数据
 * 
 * @param $toolbar HTML元素，用于将创建的按钮添加到作为工具栏的一部分
 * @param univerAPI Univer API实例，用于与Univer工作簿进行交互
 */
export function setupGetSheetData($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个按钮元素，用于触发获取工作表数据的操作
  const $button = document.createElement('a')
  $button.textContent = 'get Sheet1 data'
  $toolbar.appendChild($button)

  // 监听按钮的点击事件，以获取“Sheet1”的数据
  $button.addEventListener('click', () => {
    // 获取当前活动的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 如果无法获取活动工作簿，则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')

    // 获取工作簿的快照，用于访问工作表数据
    const snapshot = activeWorkbook.getSnapshot()
    // 查找名为“Sheet1”的工作表
    const sheet1 = Object.values(snapshot.sheets).find((sheet) => {
      return sheet.name === 'Sheet1'
    })

    // 如果找不到名为“Sheet1”的工作表，则抛出错误
    if (!sheet1)
      throw new Error('sheet1 is not defined')

    // 弹窗显示“Sheet1”的JSON数据，方便用户查看
    alert(JSON.stringify(sheet1, null, 2))
    // 在控制台输出“Sheet1”的JSON数据，用于调试
    console.log(JSON.stringify(sheet1, null, 2))
  })
}

/**
 * 设置创建 Sheet 的按钮
 * 
 * @param $toolbar - 一个 HTML 元素，代表工具栏，按钮将会被添加到这里
 * @param univerAPI - FUniver 类型的 API 对象，用于操作 Univer 应用
 */
export function setupCreateSheet($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个按钮元素
  const $button = document.createElement('a');
  // 设置按钮的文本内容
  $button.textContent = 'create Sheet2';
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button);

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 获取当前活跃的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook();
    // 如果无法获取活跃工作簿，则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined');

    // 创建名为 'Sheet2' 的新工作表，初始尺寸为 10 行 10 列
    const sheet = activeWorkbook.create('Sheet2', 10, 10);

    // 如果创建失败，则抛出错误
    if (!sheet)
      throw new Error('sheet is not defined');

    // 弹窗提示用户工作表已创建
    alert('Sheet created');
  });
}

/**
 * 在工具栏中设置滚动到特定单元格的按钮
 * 
 * 此函数在给定的工具栏元素中添加一个按钮，该按钮允许用户滚动到工作表中的特定单元格
 * 它利用了Univer API来执行滚动操作
 * 
 * @param $toolbar 工具栏的HTML元素，按钮将被添加到此元素中
 * @param univerAPI Univer API的实例，用于执行滚动到特定单元格的操作
 */
export function setupScrollToCell($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个按钮元素，用于滚动到特定的单元格
  const $button = document.createElement('a')
  $button.textContent = 'scroll to B100'
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 确保Univer API实例已定义
    if (!univerAPI)
      throw new Error('univerAPI is not defined')

    // 获取当前活跃的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 确保活跃工作簿已定义
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')

    // 执行滚动到特定单元格的命令
    univerAPI.executeCommand(ScrollToCellCommand.id, {
      range: {
        startColumn: 1,
        startRow: 99,
      },
    })
  })
}

/**
 * 设置滚动到顶部的功能
 * 
 * 此函数会在给定的工具栏元素中添加一个按钮，当点击该按钮时，
 * 会执行一个命令，使活动工作簿的工作表滚动到顶部
 * 
 * @param $toolbar - 工具栏元素，用于添加滚动到顶部的按钮
 * @param univerAPI - Univer API 的实例，用于操作工作簿
 */
export function setupScrollToTop($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个链接元素作为滚动到顶部的按钮
  const $button = document.createElement('a')
  $button.textContent = 'scroll to top' // 设置按钮的文本内容
  $toolbar.appendChild($button) // 将按钮添加到工具栏中

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 检查 univerAPI 是否定义
    if (!univerAPI)
      throw new Error('univerAPI is not defined')

    // 获取当前活动的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 检查活动工作簿是否定义
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')

    // 执行命令，使工作表滚动到顶部
    univerAPI.executeCommand('sheet.command.scroll-to-cell', {
      range: {
        startColumn: 0,
        startRow: 0,
      },
    })
  })
}

/**
 * 设置滚动到底部的功能
 * 
 * 此函数在给定的工具栏中添加一个按钮，该按钮允许用户滚动到工作表的底部
 * 它通过创建一个按钮元素并监听其点击事件来实现，当点击时，它会使用Univer API滚动到工作表的底部
 * 
 * @param $toolbar 工具栏的HTML元素，按钮将被添加到此元素中
 * @param univerAPI Univer API的实例，用于与Univer应用程序进行交互
 */
export function setupScrollToBottom($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个按钮元素
  const $button = document.createElement('a')
  // 设置按钮的文本内容
  $button.textContent = 'scroll to bottom'
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 检查univerAPI是否定义，如果没有定义则抛出错误
    if (!univerAPI)
      throw new Error('univerAPI is not defined')

    // 获取当前活跃的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 如果无法获取活跃的工作簿，则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')
    // 获取当前活跃的工作表
    const activeSheet = activeWorkbook.getActiveSheet()
    // 如果无法获取活跃的工作表，则抛出错误
    if (!activeSheet)
      throw new Error('activeSheet is not defined')

    // 通过特定API获取工作表的行数
    // eslint-disable-next-line ts/ban-ts-comment
    // @ts-expect-error
    const { rowCount } = activeSheet._worksheet.getSnapshot()
    // 执行命令滚动到工作表的底部
    univerAPI.executeCommand('sheet.command.scroll-to-cell', {
      range: {
        startColumn: 0,
        startRow: rowCount - 1,
      },
    })
  })
}

/**
 * 设置工具栏背景功能
 * 
 * 此函数用于在工具栏上添加一个按钮，当点击该按钮时，将设置活动工作表的A1单元格背景颜色为红色
 * 
 * @param $toolbar 工具栏的HTML元素引用，用于在其中添加背景设置按钮
 * @param univerAPI Univer API的引用，用于操作工作表
 */
export function setupSetBackground($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个按钮元素
  const $button = document.createElement('a')
  // 设置按钮的文本内容
  $button.textContent = 'set A1 background'
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 检查univerAPI是否定义，未定义则抛出错误
    if (!univerAPI)
      throw new Error('univerAPI is not defined')

    // 获取当前活动的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 检查活动工作簿是否定义，未定义则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')
    // 获取当前活动的工作表
    const activeSheet = activeWorkbook.getActiveSheet()
    // 检查活动工作表是否定义，未定义则抛出错误
    if (!activeSheet)
      throw new Error('activeSheet is not defined')

    // 获取A1单元格的范围
    const range = activeSheet.getRange(0, 0, 1, 1)
    // 设置A1单元格的背景颜色为红色
    range?.setBackgroundColor('red')
  })
}

/**
 * 设置命令监听器开关
 * 
 * 此函数用于在工具栏上创建一个按钮，该按钮可以启用或禁用对Univer实例命令的监听
 * 当点击按钮时，如果监听器已存在，则将其移除；如果不存在，则创建一个新的监听器
 * 
 * @param $toolbar 工具栏的HTML元素引用通过此参数，函数能够在指定的工具栏上添加一个按钮
 * @param univerAPI Univer实例的API引用该API用于访问Univer实例的命令监听功能
 */
export function setupCommandsListenerSwitch($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建按钮元素，并设置初始文本内容
  const $button = document.createElement('a')
  $button.textContent = 'start listening commands'
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button)
  // 通过变量el获取按钮的引用，以便后续操作
  const el = $button
  // 定义一个变量来存储命令监听器，初始值为null
  let listener: any = null

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 如果univerAPI未定义，则抛出错误
    if (!univerAPI)
      throw new Error('univerAPI is not defined')

    // 如果监听器已存在，则移除它，并重置按钮文本
    if (listener) {
      listener.dispose()
      listener = null
      el.innerHTML = 'start listening commands'
      return
    }

    // 创建新的命令监听器，并设置按钮文本
    listener = univerAPI.onCommandExecuted((command) => {
      // eslint-disable-next-line no-console
      console.log(command)
    })
    el.innerHTML = 'stop listening commands'

    // 提示用户如何打开控制台并查看命令监听结果
    // eslint-disable-next-line no-alert
    alert('Press "Ctrl + Shift + I" to open the console and do some actions in the Univer Sheets, you will see the commands in the console.')
  })
}

/**
 * 设置编辑切换按钮
 * 
 * 该函数创建并设置一个按钮，用于切换编辑模式
 * 当点击按钮时，如果当前模式为可编辑，则切换为禁用编辑模式，反之亦然
 * 在禁用编辑模式下，尝试进行编辑操作将抛出DisableEditError异常
 * 
 * @param $toolbar 工具栏元素，按钮将被添加到此元素中
 * @param univerAPI Univer API实例，用于监听和控制编辑操作
 */
export function setupEditSwitch($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建按钮元素并设置初始状态
  const $button = document.createElement('a')
  $button.textContent = 'disable edit'
  $toolbar.appendChild($button)

  // 保存对按钮的引用，以便后续操作
  const el = $button

  // 定义用于移除事件监听器的变量
  let listener: any = null
  let errListener: any = null

  // 监听按钮点击事件，以切换编辑模式
  $button.addEventListener('click', () => {
    // 确保univerAPI已定义，否则抛出错误
    if (!univerAPI)
      throw new Error('univerAPI is not defined')

    // 定义禁用编辑错误类，用于标识编辑被禁用的情况
    class DisableEditError extends Error {
      constructor() {
        super('editing is disabled')
        this.name = 'DisableEditError'
      }
    }

    // 如果监听器已存在，则移除监听器并恢复按钮文本
    if (listener) {
      listener.dispose()
      window.removeEventListener('error', errListener)
      window.removeEventListener('unhandledrejection', errListener)
      listener = null
      el.innerHTML = 'disable edit'
      return
    }

    // 设置错误监听器，以拦截因禁用编辑而抛出的错误
    errListener = (e: PromiseRejectionEvent | ErrorEvent) => {
      const error = e instanceof PromiseRejectionEvent ? e.reason : e.error
      if (error instanceof DisableEditError) {
        e.preventDefault()
        console.warn('editing is disabled')
      }
    }
    // 添加错误监听器
    window.addEventListener('error', errListener)
    window.addEventListener('unhandledrejection', errListener)

    // 设置Univer API的监听器，以阻止执行编辑命令
    listener = univerAPI.onBeforeCommandExecute(() => {
      throw new DisableEditError()
    })

    // 提示用户编辑已禁用，并告知尝试编辑以查看效果
    alert('Editing is disabled, try to edit a cell to see the effect')
    el.innerHTML = 'enable edit'
  })
}

/**
 * 在工具栏上设置撤销按钮
 * 
 * 此函数创建一个撤销按钮，并将其添加到指定的工具栏元素中当用户点击这个按钮时，
 * 它会调用 Univer API 的执行命令方法来执行撤销操作
 * 
 * @param $toolbar 工具栏元素，用于在其中添加撤销按钮
 * @param univerAPI Univer API 的实例，用于调用执行命令方法
 */
export function setupUndo($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个锚点元素作为撤销按钮
  const $button = document.createElement('a')
  // 设置按钮的文本内容为 'undo'
  $button.textContent = 'undo'
  // 将撤销按钮添加到工具栏中
  $toolbar.appendChild($button)

  // 监听撤销按钮的点击事件
  $button.addEventListener('click', () => {
    // 检查 Univer API 实例是否定义，如果没有定义则抛出错误
    if (!univerAPI)
      throw new Error('univerAPI is not defined')

    // 调用 Univer API 的 executeCommand 方法来执行撤销操作
    univerAPI.executeCommand('univer.command.undo')
  })
}

/**
 * 在工具栏上设置重做按钮
 * 
 * @param $toolbar - 工具栏的HTML元素，用于将重做按钮添加到其中
 * @param univerAPI - FUniver类型的对象，用于与Univer应用程序进行交互
 */
export function setupRedo($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个重做按钮
  const $button = document.createElement('a')
  $button.textContent = 'redo'
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', () => {
    // 确保univerAPI已定义
    if (!univerAPI)
      throw new Error('univerAPI is not defined')

    // 执行重做命令
    univerAPI.executeCommand('univer.command.redo')
  })
}

/**
 * 设置选区的配置
 * 
 * 此函数用于在给定的工具栏中添加一个按钮，该按钮允许用户将选区设置为特定的单元格（例如'A1'）
 * 它通过创建一个包含“select A1”文本的按钮元素，并在点击该按钮时执行相应的命令来实现
 * 
 * @param $toolbar 要添加按钮的工具栏元素引用
 * @param univerAPI Univer API的引用，用于操作和交互
 */
export function setupSetSelection($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个按钮元素，用于设置选区
  const $button = document.createElement('a')
  $button.textContent = 'select A1'
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button)

  // 监听按钮的点击事件，以设置选区
  $button.addEventListener('click', () => {
    // 确保Univer API已定义，否则抛出错误
    if (!univerAPI)
      throw new Error('univerAPI is not defined')

    // 获取当前活跃的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 确保活跃工作簿已定义，否则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')

    // 获取当前活跃的工作表
    const activeSheet = activeWorkbook.getActiveSheet()
    // 确保活跃工作表已定义，否则抛出错误
    if (!activeSheet)
      throw new Error('activeSheet is not defined')

    // 获取工作表的子单元ID
    const subUnitId = activeSheet.getSheetId()

    // 执行命令以设置选区为'A1'
    univerAPI.executeCommand('sheet.operation.set-selections', {
      selections: [{
        // 定义选区范围为'A1'（0行0列）
        range: {
          startRow: 0,
          startColumn: 0,
          endRow: 0,
          endColumn: 0,
          rangeType: 0,
        },
      }],
      subUnitId,
      unitId: activeWorkbook.getId(),
      type: 2,
    })
  })
}

/**
 * 设置清除样式按钮的事件监听器
 * 
 * 此函数在工具栏上创建一个按钮，当点击该按钮时，将清除活动工作表中A1单元格的样式
 * 它使用了Univer API来执行相关的命令
 * 
 * @param $toolbar 工具栏元素，用于附加清除样式按钮
 * @param univerAPI Univer API实例，用于调用命令来清除样式
 */
export function setupClearStyles($toolbar: HTMLElement, univerAPI: FUniver) {
  // 创建一个锚点元素作为按钮
  const $button = document.createElement('a')
  // 设置按钮的文本内容
  $button.textContent = 'clear A1 styles'
  // 将按钮添加到工具栏中
  $toolbar.appendChild($button)

  // 监听按钮的点击事件
  $button.addEventListener('click', async () => {
    // 如果Univer API未定义，则抛出错误
    if (!univerAPI)
      throw new Error('univerAPI is not defined')

    // 获取当前活动的工作簿
    const activeWorkbook = univerAPI.getActiveWorkbook()
    // 如果活动工作簿未定义，则抛出错误
    if (!activeWorkbook)
      throw new Error('activeWorkbook is not defined')
    // 获取当前活动的工作表
    const activeSheet = activeWorkbook.getActiveSheet()
    // 如果活动工作表未定义，则抛出错误
    if (!activeSheet)
      throw new Error('activeSheet is not defined')

    // 获取活动工作表的子单元ID
    const subUnitId = activeSheet.getSheetId()

    // 执行命令以选择A1单元格
    await univerAPI.executeCommand('sheet.operation.set-selections', {
      selections: [{
        range: {
          startRow: 0,
          startColumn: 0,
          endRow: 0,
          endColumn: 0,
          rangeType: 0,
        },
      }],
      subUnitId,
      unitId: activeWorkbook.getId(),
      type: 2,
    })

    // 执行命令以清除当前选择的单元格的样式
    univerAPI.executeCommand('sheet.command.clear-selection-format')
  })
}
